<template>
	<view id="Mobile">
		<upper-navigation>更改手机号</upper-navigation>
		<view class="about">
			<input class="change" type="number" maxlength="11" @input="getInput" :value="`${user.mobile}`" placeholder="你本人的手机号"/>
			<view class="tip">请输入正确的11位手机号码</view>
		</view>
		<lower-btn url="./Personal" @save-click="store"></lower-btn>
		<bottom-bar></bottom-bar>
	</view>
</template>

<script>
	// 黄昕焕 @ 2023年6月12日 页面+绑定
	import bottomBar from '@/pages/Community/bottomNavigationBar.vue'
	import upperNavigation from '@/pages/Community/upperNavigation.vue'
	import lowerBtn from '@/pages/ucenter/lowerBtn.vue'
	import { useCurrentUser } from '@/stores/useUser.js'
	const currentUser = useCurrentUser();
	var inputvalue;
	export default {
		components: {
			bottomBar,
			upperNavigation,
			lowerBtn
		},
		data () {
			return {
				user: currentUser.user
			}
		}, 
		methods: {
			getInput: function(event){
				inputvalue = event.detail.value;
			},
			store: function(){
				console.log(inputvalue);
				currentUser.modifyMobile(inputvalue);
			}
		},
		
		async mounted () {
			await currentUser.getUserInfo();
			inputvalue = currentUser.user.mobile;
		}
	}
</script>

<style lang="less">
	@import url(../Community/shared.less);
	@content-size: 25rpx;
	#Mobile{
		height: 100vh;
		background-color: rgb(248, 248, 248);
		.about{
			padding: 50rpx 70rpx;
			.change{
				height: 45px;
				border-radius: 50px;
				background-color: #fff;
				padding-left: 15px; 
				font-size: 32rpx;
				color: black;
			}
			.tip{
				margin-top: 20rpx;
				color: grey;
				font-size: 25rpx;
			}	
		}
	}
</style>
